<template>
  <div class="form">
    <h2 class="title">完善商家信息</h2>
    <el-form :model="form" label-width="200px">
      <el-form-item required label="店铺名"
        ><el-input v-model="form.name" />
      </el-form-item>
      <el-form-item required label="电话号">
        <el-input v-model="form.phone_number" />
      </el-form-item>
      <el-form-item required label="营业时间">
        <div class="demo-time-range">
          <el-time-select
            v-model="form.startTime"
            :max-time="form.endTime"
            class="mr-4"
            placeholder="Start time"
            start="06:00"
            step="00:30"
            end="24:00"
          />
          <el-time-select
            v-model="form.endTime"
            :min-time="form.startTime"
            placeholder="End time"
            start="08:30"
            step="00:30"
            end="24:00"
          />
        </div>
      </el-form-item>
      <el-form-item required label="店铺地址">
        <el-input v-model="form.shop_address" />
      </el-form-item>
      <el-form-item required label="店铺简介">
        <el-input v-model="form.information" />
      </el-form-item>
      <el-form-item required label="店铺头像上传">
        <div class="front upload-item">
          <el-upload
            :limit="1"
            action="#"
            list-type="picture"
            :auto-upload="false"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :on-change="imgSaveToUrl"
            :show-file-list="false"
            ref="frontUpload"
          >
            <img class="icon-img" v-if="imageFrontUrl" :src="imageFrontUrl" />
            <el-icon v-else class="el-icon-plus"></el-icon>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item required label="店铺首页背景">
        <div class="front upload-item">
          <el-upload
            :limit="1"
            action="#"
            list-type="picture"
            :auto-upload="false"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :on-change="imgSaveToUrl1"
            :show-file-list="false"
            ref="frontUpload1"
          >
            <img class="icon-img" v-if="imageFrontUrl1" :src="imageFrontUrl1" />
            <el-icon v-else class="el-icon-plus"></el-icon>
          </el-upload></div
      ></el-form-item>
      <el-form-item required label="营业资质上传">
        <div class="front upload-item">
          <el-upload
            :limit="1"
            action="#"
            list-type="picture"
            :auto-upload="false"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :on-change="imgSaveToUrl2"
            :show-file-list="false"
            ref="frontUpload2"
          >
            <img class="icon-img" v-if="imageFrontUrl2" :src="imageFrontUrl2" />
            <el-icon v-else class="el-icon-plus"></el-icon>
          </el-upload></div
      ></el-form-item>
      <div class="font">注意以上提交资料必须保证正确！否则无法成功开店！！</div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"
          >我已确认,点击完善！</el-button
        >
        <!-- <el-button @click="testUpload">TEST</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue'
// import type { UploadFile } from 'element-plus/packages/upload/src/upload.type'
import {
  updateFile,
  updateShopInfo,
  updateAvatar
} from '@/service/main/system/system'
import localCache from '@/utils/cache'
import { ElMessage } from 'element-plus'
// const startTime = ref('')
// const endTime = ref('')

const form = reactive({
  name: '',
  phone_number: '',
  information: '',
  shop_time: '',
  shop_address: '',
  startTime: '',
  endTime: ''
})
const onSubmit = () => {
  form.shop_time = form.startTime + `-` + form.endTime
  updateShopInfo(form, localCache.getCache(`userInfo`).id).then((res) => {
    console.log(res)
  })
  updateShopAvatar(param)
  updateShopBg(param1)
  updateShopQul(param2)
}
//图片上传
const frontUpload = ref(null)
const imageFrontUrl = ref('')

const frontUpload1 = ref(null)
const imageFrontUrl1 = ref('')

const frontUpload2 = ref(null)
const imageFrontUrl2 = ref('')

const param = new FormData()
const param1 = new FormData()
const param2 = new FormData()
const imgSaveToUrl = (file: any) => {
  param.append(`avatar`, file.raw)
  imageFrontUrl.value = URL.createObjectURL(file.raw)
  const fileSize = file.size
  const fileType = file.raw.type
  if (!fileSize) {
    // 是否为空
    ElMessage({
      type: 'error',
      showClose: true,
      message: '无效的文件，请重新选择！'
    })
    return
  }
  if (fileSize / 1024 / 1024 > 10) {
    // 图片大小
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片！'
    })
    return
  }
  if (fileType.indexOf('image') === -1) {
    // 如果不是图片格式
    ElMessage({
      type: 'error',
      showClose: true,
      message: '不是有效的图片文件，或格式不支持，请重新选择!'
    })
    return
  }
}
const imgSaveToUrl1 = (file: any) => {
  param1.append(`picture`, file.raw)
  imageFrontUrl1.value = URL.createObjectURL(file.raw)
  const fileSize = file.size
  const fileType = file.raw.type
  if (!fileSize) {
    // 是否为空
    ElMessage({
      type: 'error',
      showClose: true,
      message: '无效的文件，请重新选择！'
    })
    //logoPicRemove()
    return
  }
  if (fileSize / 1024 / 1024 > 10) {
    // 图片大小
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片！'
    })
    return
  }
  if (fileType.indexOf('image') === -1) {
    // 如果不是图片格式
    ElMessage({
      type: 'error',
      showClose: true,
      message: '不是有效的图片文件，或格式不支持，请重新选择!'
    })
    return
  }
  //imageUpload(file)
}
const imgSaveToUrl2 = (file: any) => {
  param2.append(`picture`, file.raw)
  imageFrontUrl2.value = URL.createObjectURL(file.raw)
  const fileSize = file.size
  const fileType = file.raw.type
  if (!fileSize) {
    // 是否为空
    ElMessage({
      type: 'error',
      showClose: true,
      message: '无效的文件，请重新选择！'
    })
    //logoPicRemove()
    return
  }
  if (fileSize / 1024 / 1024 > 10) {
    // 图片大小
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片！'
    })
    return
  }
  if (fileType.indexOf('image') === -1) {
    // 如果不是图片格式
    ElMessage({
      type: 'error',
      showClose: true,
      message: '不是有效的图片文件，或格式不支持，请重新选择!'
    })
    return
  }
  //imageUpload(file)
}
const updateShopAvatar = (file: any) => {
  updateAvatar(file).then((res) => {
    console.log(res)
  })
}
const updateShopBg = (file: any) => {
  updateFile(file, 1, localCache.getCache(`userInfo`).id).then((res) => {
    console.log(res)
  })
}
const updateShopQul = (file: any) => {
  updateFile(file, 3, localCache.getCache(`userInfo`).id).then((res) => {
    console.log(res)
  })
}
</script>

<style scoped>
.form {
  width: 40%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.title {
  margin-left: 100px;
  padding-bottom: 20px;
}
.font {
  display: inline-block;
  width: 320px;
  font-size: 12px;
  color: rgb(143, 149, 158);
  margin-left: 100px;
  padding-bottom: 30px;
}
.front {
  display: flex;
}
.icon-img {
  width: 110px;
  height: 110px;
}
.front >>> i {
  padding-top: 50px;
  width: 110px;
  height: 60px;
  background-color: rgb(250, 250, 250);
}
</style>
